"use client"

import { useState } from "react"
import { Search, Plus, Filter, MoreHorizontal, Eye, Edit, Trash2, BookOpen, Clock, Users, BarChart } from "lucide-react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Badge } from "@/components/ui/badge"
import { Progress } from "@/components/ui/progress"

// 修改模拟课程数据
const courses = [
  {
    id: 1,
    title: "高等数学",
    description: "计算机专业高等数学课程，包括微积分、级数、多元函数等内容",
    subject: "数学",
    grade: "大一",
    teacher: "王教授",
    duration: "100分钟/课",
    totalLessons: 32,
    completedLessons: 12,
    progress: 38,
    students: 60,
    averageAttention: 85,
    status: "进行中",
    image: "/placeholder.svg?height=100&width=200&text=高等数学",
  },
  {
    id: 2,
    title: "大学英语",
    description: "大学英语四级课程，培养学生的英语听说读写能力",
    subject: "英语",
    grade: "大一",
    teacher: "李教授",
    duration: "100分钟/课",
    totalLessons: 32,
    completedLessons: 20,
    progress: 62,
    students: 65,
    averageAttention: 78,
    status: "进行中",
    image: "/placeholder.svg?height=100&width=200&text=大学英语",
  },
  {
    id: 3,
    title: "C++程序设计",
    description: "C++程序设计基础课程，包括基本语法、面向对象编程和标准库",
    subject: "计算机",
    grade: "大一",
    teacher: "张教授",
    duration: "100分钟/课",
    totalLessons: 28,
    completedLessons: 28,
    progress: 100,
    students: 58,
    averageAttention: 75,
    status: "已完成",
    image: "/placeholder.svg?height=100&width=200&text=C++",
  },
  {
    id: 4,
    title: "数据结构",
    description: "计算机专业核心课程，讲解各种数据结构及其算法实现",
    subject: "计算机",
    grade: "大二",
    teacher: "刘教授",
    duration: "100分钟/课",
    totalLessons: 24,
    completedLessons: 10,
    progress: 42,
    students: 55,
    averageAttention: 88,
    status: "进行中",
    image: "/placeholder.svg?height=100&width=200&text=数据结构",
  },
  {
    id: 5,
    title: "计算机网络",
    description: "介绍计算机网络的基本概念、体系结构和协议",
    subject: "计算机",
    grade: "大二",
    teacher: "陈教授",
    duration: "100分钟/课",
    totalLessons: 20,
    completedLessons: 5,
    progress: 25,
    students: 52,
    averageAttention: 80,
    status: "进行中",
    image: "/placeholder.svg?height=100&width=200&text=计算机网络",
  },
  {
    id: 6,
    title: "操作系统",
    description: "操作系统原理与设计课程，包括进程管理、内存管理、文件系统等",
    subject: "计算机",
    grade: "大二",
    teacher: "周教授",
    duration: "100分钟/课",
    totalLessons: 16,
    completedLessons: 16,
    progress: 100,
    students: 50,
    averageAttention: 92,
    status: "已完成",
    image: "/placeholder.svg?height=100&width=200&text=操作系统",
  },
]

export function CourseManagement() {
  const [searchTerm, setSearchTerm] = useState("")
  const [activeTab, setActiveTab] = useState("all")

  // 过滤课程数据
  const filteredCourses = courses.filter((course) => {
    const matchesSearch =
      course.title.includes(searchTerm) ||
      course.description.includes(searchTerm) ||
      course.subject.includes(searchTerm)
    const matchesTab =
      activeTab === "all" ||
      (activeTab === "active" && course.status === "进行中") ||
      (activeTab === "completed" && course.status === "已完成")
    return matchesSearch && matchesTab
  })

  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>课程管理</CardTitle>
          <CardDescription>管理所有课程信息和教学进度</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="mb-4 flex flex-col gap-4 sm:flex-row">
            <div className="flex flex-1 items-center gap-2">
              <div className="relative flex-1">
                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                <Input
                  type="search"
                  placeholder="搜索课程名称或描述..."
                  className="pl-8"
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                />
              </div>
              <Button variant="outline" size="icon">
                <Filter className="h-4 w-4" />
                <span className="sr-only">筛选</span>
              </Button>
            </div>
            <Button size="sm" className="gap-1">
              <Plus className="h-4 w-4" />
              添加课程
            </Button>
          </div>

          <Tabs defaultValue="all" onValueChange={setActiveTab}>
            <TabsList className="mb-4">
              <TabsTrigger value="all">所有课程</TabsTrigger>
              <TabsTrigger value="active">进行中</TabsTrigger>
              <TabsTrigger value="completed">已完成</TabsTrigger>
            </TabsList>
            <TabsContent value="all" className="mt-0">
              <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                {filteredCourses.map((course) => (
                  <Card key={course.id} className="overflow-hidden">
                    <div className="aspect-video w-full overflow-hidden">
                      <img
                        src={course.image || "/placeholder.svg"}
                        alt={course.title}
                        className="h-full w-full object-cover"
                      />
                    </div>
                    <CardHeader className="p-4">
                      <div className="flex items-start justify-between">
                        <div>
                          <CardTitle className="text-lg">{course.title}</CardTitle>
                          <CardDescription className="line-clamp-2 mt-1">{course.description}</CardDescription>
                        </div>
                        <Badge variant={course.status === "进行中" ? "default" : "secondary"}>{course.status}</Badge>
                      </div>
                    </CardHeader>
                    <CardContent className="p-4 pt-0">
                      <div className="grid grid-cols-2 gap-2 text-sm">
                        <div className="flex items-center gap-1">
                          <BookOpen className="h-4 w-4 text-muted-foreground" />
                          <span>{course.subject}</span>
                        </div>
                        <div className="flex items-center gap-1">
                          <Users className="h-4 w-4 text-muted-foreground" />
                          <span>{course.students}名学生</span>
                        </div>
                        <div className="flex items-center gap-1">
                          <Clock className="h-4 w-4 text-muted-foreground" />
                          <span>{course.duration}</span>
                        </div>
                        <div className="flex items-center gap-1">
                          <BarChart className="h-4 w-4 text-muted-foreground" />
                          <span>注意力 {course.averageAttention}%</span>
                        </div>
                      </div>
                      <div className="mt-4">
                        <div className="mb-1 flex items-center justify-between text-sm">
                          <span>课程进度</span>
                          <span>
                            {course.completedLessons}/{course.totalLessons}课时
                          </span>
                        </div>
                        <Progress value={course.progress} />
                      </div>
                    </CardContent>
                    <CardFooter className="flex justify-between p-4 pt-0">
                      <Button variant="outline" size="sm">
                        查看详情
                      </Button>
                      <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                          <Button variant="ghost" size="icon">
                            <MoreHorizontal className="h-4 w-4" />
                            <span className="sr-only">操作菜单</span>
                          </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                          <DropdownMenuLabel>操作</DropdownMenuLabel>
                          <DropdownMenuSeparator />
                          <DropdownMenuItem>
                            <Eye className="mr-2 h-4 w-4" />
                            查看详情
                          </DropdownMenuItem>
                          <DropdownMenuItem>
                            <Edit className="mr-2 h-4 w-4" />
                            编辑课程
                          </DropdownMenuItem>
                          <DropdownMenuSeparator />
                          <DropdownMenuItem className="text-red-600">
                            <Trash2 className="mr-2 h-4 w-4" />
                            删除课程
                          </DropdownMenuItem>
                        </DropdownMenuContent>
                      </DropdownMenu>
                    </CardFooter>
                  </Card>
                ))}
              </div>
            </TabsContent>
            <TabsContent value="active" className="mt-0">
              <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                {filteredCourses
                  .filter((course) => course.status === "进行中")
                  .map((course) => (
                    <Card key={course.id} className="overflow-hidden">
                      <div className="aspect-video w-full overflow-hidden">
                        <img
                          src={course.image || "/placeholder.svg"}
                          alt={course.title}
                          className="h-full w-full object-cover"
                        />
                      </div>
                      <CardHeader className="p-4">
                        <div className="flex items-start justify-between">
                          <div>
                            <CardTitle className="text-lg">{course.title}</CardTitle>
                            <CardDescription className="line-clamp-2 mt-1">{course.description}</CardDescription>
                          </div>
                          <Badge variant={course.status === "进行中" ? "default" : "secondary"}>{course.status}</Badge>
                        </div>
                      </CardHeader>
                      <CardContent className="p-4 pt-0">
                        <div className="grid grid-cols-2 gap-2 text-sm">
                          <div className="flex items-center gap-1">
                            <BookOpen className="h-4 w-4 text-muted-foreground" />
                            <span>{course.subject}</span>
                          </div>
                          <div className="flex items-center gap-1">
                            <Users className="h-4 w-4 text-muted-foreground" />
                            <span>{course.students}名学生</span>
                          </div>
                          <div className="flex items-center gap-1">
                            <Clock className="h-4 w-4 text-muted-foreground" />
                            <span>{course.duration}</span>
                          </div>
                          <div className="flex items-center gap-1">
                            <BarChart className="h-4 w-4 text-muted-foreground" />
                            <span>注意力 {course.averageAttention}%</span>
                          </div>
                        </div>
                        <div className="mt-4">
                          <div className="mb-1 flex items-center justify-between text-sm">
                            <span>课程进度</span>
                            <span>
                              {course.completedLessons}/{course.totalLessons}课时
                            </span>
                          </div>
                          <Progress value={course.progress} />
                        </div>
                      </CardContent>
                      <CardFooter className="flex justify-between p-4 pt-0">
                        <Button variant="outline" size="sm">
                          查看详情
                        </Button>
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" size="icon">
                              <MoreHorizontal className="h-4 w-4" />
                              <span className="sr-only">操作菜单</span>
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuLabel>操作</DropdownMenuLabel>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem>
                              <Eye className="mr-2 h-4 w-4" />
                              查看详情
                            </DropdownMenuItem>
                            <DropdownMenuItem>
                              <Edit className="mr-2 h-4 w-4" />
                              编辑课程
                            </DropdownMenuItem>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem className="text-red-600">
                              <Trash2 className="mr-2 h-4 w-4" />
                              删除课程
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </CardFooter>
                    </Card>
                  ))}
              </div>
            </TabsContent>
            <TabsContent value="completed" className="mt-0">
              <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                {filteredCourses
                  .filter((course) => course.status === "已完成")
                  .map((course) => (
                    <Card key={course.id} className="overflow-hidden">
                      <div className="aspect-video w-full overflow-hidden">
                        <img
                          src={course.image || "/placeholder.svg"}
                          alt={course.title}
                          className="h-full w-full object-cover"
                        />
                      </div>
                      <CardHeader className="p-4">
                        <div className="flex items-start justify-between">
                          <div>
                            <CardTitle className="text-lg">{course.title}</CardTitle>
                            <CardDescription className="line-clamp-2 mt-1">{course.description}</CardDescription>
                          </div>
                          <Badge variant={course.status === "进行中" ? "default" : "secondary"}>{course.status}</Badge>
                        </div>
                      </CardHeader>
                      <CardContent className="p-4 pt-0">
                        <div className="grid grid-cols-2 gap-2 text-sm">
                          <div className="flex items-center gap-1">
                            <BookOpen className="h-4 w-4 text-muted-foreground" />
                            <span>{course.subject}</span>
                          </div>
                          <div className="flex items-center gap-1">
                            <Users className="h-4 w-4 text-muted-foreground" />
                            <span>{course.students}名学生</span>
                          </div>
                          <div className="flex items-center gap-1">
                            <Clock className="h-4 w-4 text-muted-foreground" />
                            <span>{course.duration}</span>
                          </div>
                          <div className="flex items-center gap-1">
                            <BarChart className="h-4 w-4 text-muted-foreground" />
                            <span>注意力 {course.averageAttention}%</span>
                          </div>
                        </div>
                        <div className="mt-4">
                          <div className="mb-1 flex items-center justify-between text-sm">
                            <span>课程进度</span>
                            <span>
                              {course.completedLessons}/{course.totalLessons}课时
                            </span>
                          </div>
                          <Progress value={course.progress} />
                        </div>
                      </CardContent>
                      <CardFooter className="flex justify-between p-4 pt-0">
                        <Button variant="outline" size="sm">
                          查看详情
                        </Button>
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" size="icon">
                              <MoreHorizontal className="h-4 w-4" />
                              <span className="sr-only">操作菜单</span>
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent align="end">
                            <DropdownMenuLabel>操作</DropdownMenuLabel>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem>
                              <Eye className="mr-2 h-4 w-4" />
                              查看详情
                            </DropdownMenuItem>
                            <DropdownMenuItem>
                              <Edit className="mr-2 h-4 w-4" />
                              编辑课程
                            </DropdownMenuItem>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem className="text-red-600">
                              <Trash2 className="mr-2 h-4 w-4" />
                              删除课程
                            </DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </CardFooter>
                    </Card>
                  ))}
              </div>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  )
}
